<template>
    <table border="1">
        <tr>
            <td>房型名称</td>
            <td>
                <input type="text" v-model="info.htname">
            </td>
        </tr>
        <tr>
            <td>单价（元）</td>
            <td>
                <input type="text" v-model="info.htprice">
            </td>
        </tr>
        <tr>
            <td>室内面积（平方米）</td>
            <td>
                <input type="text" v-model="info.htsize">
            </td>
        </tr>

        <tr>
            <td>最多入住人数</td>
            <td>
                <input type="text" v-model="info.peonum">
            </td>
        </tr>
        <tr>
            <td>图片</td>
            <td>
                <img :src="info.picture" style="width: 110px;height: 100px;">
                <input type="file" @change="upload">
            </td>
        </tr>
        <tr>
            <td>房型描述</td>
            <td>
                <input type="text" v-model="info.prescribe">
            </td>
        </tr>
        <tr>
            <td>是否有窗</td>
            <td>
                <input type="radio" :value="true" name="A" v-model="info.windows">有窗户
                <input type="radio" :value="false" name="A" v-model="info.windows">没窗户
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <input type="button"  value="确认修改" @click="upd">
            </td>
        </tr>
    </table>
</template>
<script setup lang="ts">

import {ref} from 'vue'
import { onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
onMounted(()=>{
    fen();
})
const upload=(x:any)=>{
    var file=x.target.files[0];
    var fd=new FormData();
    fd.append("files",file);
    axios.post('http://localhost:46564/api/Upload/Upload',fd)
    .then(res=>{
        info.value.picture=res.data
    })
    .catch(error=>{
        console.log(error);
    })
}
const ror=useRouter();
const r=useRoute();
const fen=()=>{
    axios.get('http://localhost:46564/api/House/Fill',{
        params:{
            id:r.params.id
        }
    })
    .then(res=>{
        info.value=res.data
    })
    .catch(error=>{
        console.log(error);
    })
}
const info=ref({
    "htid": r.params.id,
    "htname": "",
    "htprice": "",
    "htsize": "",
    "peonum": "",
    "picture": "",
    "prescribe": "",
    "windows": true,
    "tisdel": 0
})
const upd=()=>{
    if(info.value.htname==""){
        alert('房型名称不能为空');
        return;
    }
    if(info.value.htprice==""){
        alert('房型价格不能为空');
        return;
    }
    if(info.value.htsize==""){
        alert('房型面积不能为空');
        return;
    }
    if(info.value.peonum==""){
        alert('可住人数不能为空');
        return;
    }
    if(info.value.picture==""){
        alert('房型图片不能为空');
        return;
    }
    if(info.value.prescribe==""){
        alert('房型描述不能为空');
        return;
    }
    axios.post('http://localhost:46564/api/House/UpdType',info.value)
    .then(res=>{
        if(res.data>0){
            alert('修改成功');
            ror.push('/ShowType');
        }
        else{
            alert('修改失败');
        }
    })
    .catch(error=>{
        console.log(error);
    })
}
</script>